<template>
	<t-modal
        :title="title"
        :width="400"
        :visible="visible"
        :footer="null" 
        @ok="() => { $emit('ok')}"
        @cancel="() => {$emit('cancel')}"
    >
		<template>
			<div style="display: flex;justify-content: space-around;">
				<div class="card-item" @click="cardClick('2')">
					<div class="img-box">
						<img src="~@/assets/img/DingDing.jpg" />
					</div>
					<div class="text-box">
						<div class="title">阿里钉钉</div>
					</div>
				</div>
			</div>
		</template>
	</t-modal>
</template>

<script>
	export default {
		props: {
			visible: {
				type: Boolean,
				required: true
			},
		},
		data() {
			return {
				title: '新建三方配置',
			};
		},
		methods: {
			cardClick(e) {
				this.$emit("click", e);
			},
		}
	};
</script>
<style lang="less" scoped>
	.card-item {
		transition: 0.3s all;
		cursor: pointer;
		width: 181px;
		border: 1px solid #F0F2F5;
		border-radius: 10px;
		padding-bottom: 15px;
		.img-box{
			padding: 40px 20px 20px;
			img{
				width: 100%;
			}
		}
	}

	.card-item:hover {
		transform: scale(1.02);
		border: 1px solid #1890ff;
		box-shadow: 3px 5px 15px rgba(40, 40, 40, 0.36);
	}

	.text-box{
		text-align: center;
		.title{
			font-size: 16px;
			color: #171a1d;
			font-weight: 600;
			margin-bottom: 5px;
		}
	}

</style>
